<template>
  <div class="container">
    <el-card>
      <!-- 新增试题 -->
      <el-row :gutter="2">
        <i class="sm" :span="1">说明:目前支持学科和关键字筛选</i>
        <el-button
          :span="1"
          class="xinzeng"
          style="float: right"
          icon="el-icon-edit"
          size="small"
          type="success"
          @click="Newquestions"
          >新增试题</el-button
        >
      </el-row>
      <!-- 第一行内容 -->
      <el-row :gutter="24">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form>
              <div class="xueke">
                <el-form-item label="学科">
                  <el-select
                    v-model="form.subjectID"
                    placeholder="请选择"
                    @change="cun"
                  >
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="item in options"
                      :key="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form>
              <el-form-item label="二级目录">
                <el-select v-model="form.subjectIDs" placeholder="请选择">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in list"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form>
              <el-form-item label="标签">
                <el-select v-model="form.labelAPIID" placeholder="请选择">
                  <el-option
                    :label="item.label"
                    :value="item"
                    v-for="item in labelAPIArr"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form></div
        ></el-col>

        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form>
              <el-form-item label="关键字">
                <input
                  class="ip"
                  placeholder="请输入搜索内容"
                  v-model="form.keyword"
                />
              </el-form-item>
            </el-form></div
        ></el-col>
      </el-row>
      <!-- 第二行内容 -->
      <el-row :gutter="24">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form>
              <el-form-item label="试题类型">
                <el-select v-model="form.questionTypeID" placeholder="请选择">
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="item in questionType"
                    :key="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form>
              <div class="nandu">
                <el-form-item label="难度">
                  <el-select v-model="form.difficultyID" placeholder="请选择">
                    <el-option
                      :label="item.label"
                      :value="item.value"
                      v-for="item in difficulty"
                      :key="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-form></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form>
              <el-form-item label="方向">
                <el-select v-model="form.directionID" placeholder="请选择">
                  <el-option
                    :label="item"
                    :value="item"
                    v-for="item in direction"
                    :key="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form></div
        ></el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form>
              <el-form-item label="录入人">
                <el-select v-model="form.EnteredbyArrID" placeholder="请选择">
                  <el-option
                    :label="item.username"
                    :value="item.id"
                    v-for="item in EnteredbyArr"
                    :key="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-form></div
        ></el-col>
      </el-row>
      <!-- 第三行内容 -->
      <el-row :gutter="24">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-form>
              <el-form-item label="题目备注">
                <input class="ip" v-model="Topicnotes" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form>
              <el-form-item label="企业简介">
                <input class="ip" v-model="Companyprofile" />
              </el-form-item>
            </el-form></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple">
            <el-form>
              <el-form-item label="城市">
                <MYcitys v-model="form.provAndCity"></MYcitys>
              </el-form-item>
            </el-form></div
        ></el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <el-button @click="cancelFN">清除</el-button>
            <el-button type="primary" @click="searchFN">搜索</el-button>
          </div></el-col
        >
      </el-row>
      <!-- 主体内容导航 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待审核" name="second"></el-tab-pane>
        <el-tab-pane label="通过" name="third"></el-tab-pane>
        <el-tab-pane label="拒绝" name="fourth"></el-tab-pane>
      </el-tabs>

      <!-- 小图标 数据一共多少条 -->
      <i class="el-icon-info">数据一共{{ sum }}条</i>
      <!-- 主体表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column fixed prop="number" label="试题编号" width="150">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="120">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="120">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
        </el-table-column>
        <el-table-column label="题干" width="300">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="120">
          <template slot-scope="scope">
            <div>{{ scope.row.addDate | dateFmt("YYYY-MM-DD") }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="120">
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="120">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="120">
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="120">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="120">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="previewFN(scope.row)" type="text" size="small"

              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="TexamineFN(scope.row.id)"
              :disabled="scope.row.chkState ==='待审核' ? false : true"

              >审核</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="hEdit(scope.row.id)"
              :disabled="scope.row.publishState === '已发布' ? true : false"
              >修改</el-button
            >
            <el-button type="text" size="small">
              <span
                v-if="scope.row.publishState === '待发布' ? true : false"
                @click="shelvesFN(scope.row.id)"
                >上架</span
              >
              <span v-else @click="shelfFN(scope.row.id)">下架</span>
            </el-button>
            <el-button
              type="text"
              size="small"
              :disabled="scope.row.publishState === '已发布' ? true : false"
              @click="Hdel(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="params.pagesize"
          layout="total,sizes,prev, pager, next, jumper"
          :total="sum"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 预览 弹框-->
    <el-dialog title="题目预览" :visible.sync="isPreview">
      <TCCnew :curid="curid" v-if="isPreview"  @closeFn='guanbi'></TCCnew>
    </el-dialog>
    <!-- 审核 弹框 -->
    <el-dialog title="题目审核" :visible.sync="isShow" width="30%">
      <!-- 嵌套表单 -->
      <el-form :model="form1" ref="form1" :rules="rules">
        <!-- 拒绝 -->
        <el-form-item>
          <el-radio v-model="form1.chkState" :label="2">拒绝</el-radio>
          <!-- 通过 -->
          <el-radio v-model="form1.chkState" :label="1">通过</el-radio>
        </el-form-item>
        <!-- 文本域 -->
        <el-form-item prop="chkState">
          <el-input
            type="textarea"
            placeholder="请输入意见"
            v-model="form1.chkRemarks"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end" style="margin-top: 20px">
            <el-button @click="cancelnn">取消</el-button>
            <el-button @click="sureFn">确定</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 预览弹框
import TCCnew from '@/module-hmmm/components/questions-preview'
// 下拉标签
import { list as labelAPI } from '@/api/hmmm/tags'
// 下拉城市
import MYcitys from '../pages/companys/citys'
// 下拉 试题类型 困难 方向
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
// 二级目录
import { simple as lists } from '@/api/hmmm/directorys'
// 学科
import { simple } from '@/api/hmmm/subjects'
// 精选题库 搜索 审核 （上架，下架） 删除
import {
  choice,
  choiceCheck,
  choicePublish,
  remove
} from '@/api/hmmm/questions'
// 录入人
import { simple as Enteredby } from '@/api/base/users'

export default {
  // 组件注册
  components: {
    MYcitys,
    TCCnew
  },
  data () {
    return {

      Topicnotes: '', // 题目备注
      Companyprofile: '', // 企业简介
      questionType: questionType, // 下拉试题类型调用
      difficulty: difficulty, // 下拉困难调用
      direction: direction, // 下拉方向调用
      activeName: 'first', // 主体导航 审核判断
      isPreview: false, // 预览的显示状态
      curid: '', // 审核的id
      isShow: false, // 审核开关
      // 分页
      params: {
        page: 1,
        pagesize: 5,
        counts: 0,
        total: 0,
        sum: this.sum
      },
      // 表单状态
      form1: {
        chkState: '',
        chkRemarks: ''
      },
      // 表单验证
      rules: {
        chkState: [{ required: true, trigger: 'blur', message: '不能为空' }]
      },
      // 所有下拉id
      form: {
        keyword: '', // 关键字
        subjectID: null, // 学科 ID
        subjectIDs: null, // 二级目录 id
        questionTypeID: null, // 下拉试题ID
        difficultyID: null, // 下拉困难ID
        directionID: null, // 下拉方向ID
        EnteredbyArrID: null, // 录入人的ID
        labelAPIID: null, // 标签
        provAndCity: { // 下拉城市
          province: '',
          city: ''
        }
      },
      labelAPIArr: [], // 下拉标签
      options: [], // 下拉学科数据
      tableData: [], // 主体表格数据
      list: [], // 二级列表的数据
      EnteredbyArr: [], // 下拉录入人数组
      sum: 0 // 记录数据
    }
  },

  async created () {
    // 获取学科列表
    const res = await simple()// 调用接口
    console.log('学科列表', res)
    this.options = res.data
    // 获取主体题库
    this.dozhuti()
    // 下拉录入人接口
    const res2 = await Enteredby() // 调用接口
    console.log('我是录入人', res2)
    this.EnteredbyArr = res2.data
  },

  methods: {
    // 精选-全部
    async dozhuti () {
      const res1 = await choice(this.params) // 调用接口  传入分页的对象
      console.log('主体精选题库', res1)
      this.tableData = res1.data.items
      // 记录全部数据
      this.sum = res1.data.counts
      // 调用状态判断
      this.judge()
    },
    // 主体封装待审核
    async dozhutid () {
      const res = await choice({ chkState: 0 }) // 调用接口 传入的是后台返回的状态码
      this.tableData = res.data.items
      // 记录待审核的数据
      this.sum = res.data.counts
      // 调用状态判断
      this.judge()
    },
    // 主体封装审核通过
    async dozhutiy () {
      const res = await choice({ chkState: 1 })// 调用接口 传入的是后台返回的状态码
      this.tableData = res.data.items
      // 记录审核通过的数据
      this.sum = res.data.counts
      // 调用状态判断
      this.judge()
    },
    // 主体封装审核拒绝
    async dozhutij () {
      const res = await choice({ chkState: 2 })// 调用接口 传入的是后台返回的状态码
      this.tableData = res.data.items
      // 记录审核拒绝的数据
      this.sum = res.data.counts
      // 调用状态判断
      this.judge()
    },
    // 封装后台返回数据状态码的判断方法
    judge () {
      // 困难判断
      this.tableData.forEach((item) => {
        if (item.difficulty === '1') {
          item.difficulty = '简单'
        } else if (item.difficulty === '2') {
          item.difficulty = '一般'
        } else {
          if (item.difficulty === '3') {
            item.difficulty = '困难'
          }
        }
      })
      // 题型判断
      this.tableData.forEach((item) => {
        if (item.questionType === '1') {
          item.questionType = '单选'
        } else if (item.questionType === '2') {
          item.questionType = '多选'
        } else {
          if (item.questionType === '3') {
            item.questionType = '问答'
          }
        }
      })
      // 审核状态判断
      this.tableData.forEach((item) => {
        if (item.chkState === 0) {
          item.chkState = '待审核'
        } else if (item.chkState === 1) {
          item.chkState = '通过'
        } else {
          item.chkState = '拒绝'
        }
      })
      // 发布状态
      this.tableData.forEach((item) => {
        if (item.publishState === 0) {
          item.publishState = '待发布'
        } else if (item.publishState === 1) {
          item.publishState = '已发布'
        } else {
          item.publishState = '已下架'
        }
      })
    },
    // 主体切换导航 判断
    handleClick (tab, event) {
      console.log('我是导航切换', tab, event)
      if (this.activeName === 'first') { // 判断名字
        this.activeName = 'first' // 赋值
        this.dozhuti() // 调用 题库全部的方法
      }
      if (this.activeName === 'second') { // 判断名字
        this.activeName = 'second'// 赋值
        this.dozhutid() // 调用待审核的方法
      }
      if (this.activeName === 'third') { // 判断名字
        this.activeName = 'third'// 赋值
        this.dozhutiy() // 调用 审核通过的方法
      }
      if (this.activeName === 'fourth') { // 判断名字
        this.activeName = 'fourth'// 赋值
        this.dozhutij() // 调用 审核拒绝的方法
      }
    },
    // 分页
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.params.pagesize = val
      // 调用 更新
      this.dozhuti()
    },
    handleCurrentChange (curpage) {
      // console.log(`当前页: ${val}`)
      this.params.page = curpage
      // 调用 更新
      this.dozhuti()
    },
    // 学科改变时触发 二级目录调用接口获取数据
    async cun () {
      console.log(this.form.subjectID)
      const res = await lists(this.form) // 调用接口 传入了整个对象  让他自己找ID
      console.log(res)
      console.log(this.form)
      this.list = res.data
      // 下拉标签详情
      const res5 = await labelAPI(this.form)// 调用接口 传入了整个对象  让他自己找ID
      console.log('我是标签', res5)
      this.labelAPIArr = res5.data.items
    },
    // 新增试题跳转试题录入
    Newquestions () {
      this.$router.push('new')
    },
    // 清除表单内容
    cancelFN () {
      this.form.keyword = ''
      this.Topicnotes = ''
      this.Companyprofile = ''
      this.form.provAndCity.province = ''
      this.form.provAndCity.city = ''
      this.form = {
        subjectID: null, // 学科 ID
        subjectIDs: null, // 二级目录 id
        questionTypeID: null, // 下拉试题ID
        difficultyID: null, // 下拉困难ID
        directionID: null, // 下拉方向ID
        EnteredbyArrID: null, // 录入人的ID
        labelAPIID: null, // 标签
        provAndCity: { // 下拉城市
          province: '',
          city: ''
        }
      }
      // 调用 更新
      this.dozhuti()
    },
    // 搜索内容
    async searchFN () {
      try {
        const res6 = await choice(this.form) // 调用接口 传入的整个对象 让他自己找id
        console.log('搜索', res6)
        this.tableData = res6.data.items
        this.sum = res6.data.counts // 收集数据
        this.judge() // 调用 状态码 转换的方法
      } catch {}
    },

    // 预览
    previewFN (id) {
      // 开启弹窗
      this.isPreview = true
      // 赋值ID 用于传给子组件
      this.curid = id
    },
    guanbi () { // 自定义事件 关闭预览弹窗
      this.isPreview = false
    },
    // 审核
    TexamineFN (id) {
      // 开启弹窗
      this.isShow = true
      // 赋值 ID
      this.curid = id
    },

    // 审核取消
    cancelnn () { // 关闭弹窗
      this.isShow = false
    },
    // 审核弹窗确定
    sureFn () { // 表单验证
      this.$refs.form1.validate(async (value) => {
        console.log('我是弹窗的', this.form1)
        if (!value) return
        // 接口 传入的是  id 和 后台返回的状态
        const res = await choiceCheck({
          id: this.curid,
          chkRemarks: this.form1.chkRemarks,
          chkState: this.form1.chkState
        })

        console.log('我是弹窗接口的', res)
        // 判断后台返回的属性===的 布尔值 来执行弹框
        if (res.data.success === true) {
          this.$message.success('审核通过')
        } else if (res.data.success === false) {
          this.$message.success('审核未通过')
        }
        // 调用 更新
        this.dozhuti()
        // 关闭弹窗
        this.isShow = false
      })
    },
    // 修改
    hEdit (id) { // 路由跳转 试题录入  路由参数, 相对应ID
      this.$router.push({ path: 'new', query: { id: id } })
    },
    // 上架
    shelvesFN (id) {
      // 上架提示
      this.$confirm('上架吗')
      // 成功执行
        .then(async () => {
          const res = await choicePublish({ id: id, publishState: 1 }) // 调用接口传入状态码
          console.log('我是上架', res)
          // 调用更新
          this.dozhuti()
          this.$message.success('上架成功')
        })
        .catch(() => { // 失败后执行
          this.$message('取消上架')
        })
    },
    // 下架
    shelfFN (id) {
      // 下架提示
      this.$confirm('下架吗')
      // 成功后执行
        .then(async () => {
          const res = await choicePublish({ id: id, publishState: 2 })// 调用接口 传入状态码 id
          console.log('我是下架', res)
          // 调用更新
          this.dozhuti()
          this.$message.success('下架成功')
        })
        .catch(() => { // 失败后执行
          this.$message('取消下架')
        })
    },
    // 删除
    Hdel (id) {
      // 删除提示
      this.$confirm('删除吗')
        .then(async () => {
          const res = await remove({ id: id }) // 调用接口 传入ID
          console.log('我是删除', res)
          // 调用更新
          this.dozhuti()
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message('取消删除')
        })
    }
  }
}
</script>

<style scoped lang='scss'>
// 学科样式
.xueke {
  margin-left: 30px;
}
// 困难样式
.nandu{
  margin-left: 30px;
}
// 城市输入框大小

// 字体颜色大小
.sm {
  color: pink;
  font-size: 12px;
}

// 新增试题
.xinzeng {
  margin-top: 13px;
  margin-right: 20px;
  display: block; //转化为行内块元素。
}
// 头部下拉
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  // background: #99a9bf;
}
.bg-purple {
  // background: #d3dce6;
}
.bg-purple-light {
  // background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  width: 350px;
  margin-right: -50px;
}
// 关键字输入框
.ip {
  border-radius: 4px;
  min-height: 35px;
  width: 224px;
  border: 1px solid #ccc;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
